<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>注册页面</title>
	<link rel="stylesheet" type="text/css" href="../css/demo.css">
	<link rel="stylesheet" type="text/css" href="../css/easyui.css">
	<link rel="stylesheet" type="text/css" href="../css/icon.css">
	<script type="text/javascript" src="../js/jquery-3.4.1.js"></script>
	<script type="text/javascript" src="../js/jquery.easyui.min.js"></script>
</head>
<body>
	<h2>注册页面</h2>
	<div style="margin:20px 0;"></div>
	<div class="easyui-panel" title="New Topic" style="width:600px">
		<div style="padding:10px 60px 20px 60px">
	    <form id="register" method="post">
	    	<table cellpadding="5">
	    		<tr>
	    			<td>用户名:</td>
	    			<td>
	    				<input id="username" class="easyui-textbox" type="text" name="username" ></input>
	    			</td>
	    		</tr>
	    		<tr>
	    			<td>密码:</td>
	    			<td>
	    				<input id="password" class="easyui-textbox" type="text" name="password" ></input>
	    			</td>
	    		</tr>
	    		<tr>
	    			<td>出生日期:</td>
	    			<td>
	    				<input id="birthday" class="easyui-datebox" style="width:50%" name="birthday">
	    			</td>
	    		</tr>
	    		
	    		<tr>
	    			<td>性别:</td>
	    			<td>
	    				<div style="margin-bottom:20px">
							<input id="gender1" class="easyui-radiobutton" name="gender" value="1" label="男:">
						</div>
						<div style="margin-bottom:20px">
							<input id="gender2" class="easyui-radiobutton" name="gender" value="0" label="女:">
						</div>
					</td>
	    		</tr>
	    		<tr>
	    			<td>手机号:</td>
	    			<td>
	    				<input id="telephone" class="easyui-textbox" type="text" name="telephone" ></input>
	    				<a href="javascript:void(0)" class="easyui-linkbutton" onclick="sendMessageCheckcode();">发送短信验证码</a><br>	    	
	    			</td>
	    		</tr>
	    		<tr>
	    			<td>手机验证码:</td>
	    			<td>
	    				<input id="telCheckcode" class="easyui-textbox" type="text" name="telCheckcode" ></input>
	    			</td>
	    		</tr>
	    		
	    		<tr>
	    			<td>验证码:</td>
	    			<td>
	    				<input id="checkcode" class="easyui-textbox" name="checkcode" ></input>
	    			</td>
	    			<td>
	    				<img id="img" src="" onclick="changeImage();">
	    			</td>
	    		</tr>
	    		
	    	</table>
	    </form>
	    <div style="text-align:center;padding:5px">
	    	<a href="javascript:void(0)" class="easyui-linkbutton" onclick="register();">注册</a>
	    	
	    </div>
	    </div>
	</div>
	<script>
		/*4.注册功能  */
		function register(){
			$.ajax({
				url : "/cut_url3/RegisterServlet",
				data : $("#register").serialize(),     //收集表单数据,直接提交给后端
				type : "POST",
				dataType : "json",
				success : function(data) {
					alert(data);
					
				}
			});
		}
		
		
		
		function clearForm(){
			$('#register').form('clear');
		}
		
		/*3.发送短信验证码  */
		function sendMessageCheckcode() {
			//3.1 获取手机号,发送给后端,后端发送短信验证码给用户手机号
			var telephone = $("#telephone").val();
			$.ajax({
				url : "/cut_url3/SendMessageServlet",
				type : "POST",
				data : {"telephone" : telephone},
				dataType : "text",
				success : function(data) {
					alert(data);
				}
			});
			
		}
		
		/*2.点击验证码图片,实现更换图片的功能  */
		function changeImage() {
			$.ajax({
				url:"/cut_url3/CheckcodeServlet",
				type:"POST",
				cache : false,
		        xhr:function(){
		            var xhr = new XMLHttpRequest();
		            xhr.responseType= 'blob';
		            return xhr;
		        },
				success:function(data){
					var img = document.getElementById('img');
		            var url = window.URL || window.webkitURL;
		            img.src = url.createObjectURL(data);
				},
				error:function(data){
					alert("servlet出错了....");
				}
			});
		}
		
		/*1.随着页面的加载,就显示出来验证码 */
		$(function() {
			/*1.ajax请求,获取验证码  */
			$.ajax({
				url:"/cut_url3/CheckcodeServlet",
				type:"POST",
				cache : false,
		        xhr:function(){
		            var xhr = new XMLHttpRequest();
		            xhr.responseType= 'blob';
		            return xhr;
		        },
				success:function(data){
					var img = document.getElementById('img');
		            var url = window.URL || window.webkitURL;
		            img.src = url.createObjectURL(data);
				},
				error:function(data){
					alert("servlet出错了....");
				}
			});
		})
		
		
		
		/*1.系统产生的验证码,随机产生一个6位数,然后显示在SYSCheckBox输入框中:这种虽然可以实现,但不是真正的效果*/
		/*1.1 通过数学方法获取随机数,然后转化成36位(0-9,a-z),然后截取字符串的后6位,就得到了6位的随机字符串  */
		/*1.2 将验证码设置到响应的文本框中去,id="sysCheckcode"  */
		/* function genCheckcode() {
			var randomString = Math.random().toString(36);
			var length = randomString.length;
			var sysCheckcode = randomString.substring(length-6,length);
			$("#sysCheckcode").val(sysCheckcode);
			$("#sysCheckcode").css({'display':'block'});
		} 
		*/ 
		
	
		
	</script>
	
	
</body>
</html>